<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .content-part {
      width: 1000px;
      margin: 0px auto;
      margin-bottom: 30px;
      background-color: #ccc;
      font-size: 50px;
    }
    .floornav {
      position: fixed;
      right: 20px;
      top: 50%;
      margin-top: -100px;
      width: 120px;
      height: 200px;
      background-color: orange;
    }
    .floornav ul {
      list-style: none;
    }
    .floornav ul li {
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 26px;
      /* 鼠标变成小手指针 */
      cursor: pointer;
    }
    .floornav ul li.current {
      background-color: purple;
      color: white;
    }
  </style>
</head>
<body>
  <nav class="floornav">
    <ul id ="list">
      <li data-n="科技" class="current">科技</li>
      <li data-n="体育">体育</li>
      <li data-n="新闻">新闻</li>
      <li data-n="娱乐">娱乐</li>
      <li data-n="视频">视频</li>
    </ul>
  </nav>
  <section class="content-part" style="height: 674px;" data-n="科技">科技栏目</section>
  <section class="content-part" style="height: 564px;" data-n="体育">体育栏目</section>
  <section class="content-part" style="height: 739px;" data-n="新闻">新闻栏目</section>
  <section class="content-part" style="height: 574px;" data-n="娱乐">娱乐栏目</section>
  <section class="content-part" style="height: 894px;" data-n="视频">视频栏目</section>

  <script>
    var list = document.getElementById('list');
    var contentParts = document.querySelectorAll('.content-part');
    var lis = document.querySelectorAll('#list li')

    list.onclick = function (e){
      if (e.target.tagName.toLowerCase() == 'li') {
        // getAttribute表示得到标签身上的某个属性值
        var n = e.target.getAttribute('data-n');
        // 可以用属性选择器（就是方括号选择器）来寻找带有相同的data-n的content-part
        var contentPart = document.querySelector('.content-part[data-n='+ n +']');
        // 让页面卷动自动成为这个盒子的offsetTop值
        document.documentElement.scrollTop = contentPart.offsetTop;
      }
    }

    // 在页面加载之后，将所有的content-part盒子的offsetTop值推入到数组中
    var offsetTopArr = [];
    for (var i = 0; i < contentParts.length; i++) {
      offsetTopArr.push(contentParts[i].offsetTop);
    }

    // 为了最后一项可以方便比较，我们可以推入一个无穷大
    offsetTopArr.push(Infinity);

    // 当前楼层
    var nowfloor = -1;

    // 监听窗口的卷动事件
    window.onscroll = function(){
      var scrollTop = document.documentElement.scrollTop;
      for (var i = 0; i < offsetTopArr.length; i++ ){
        if (scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[i+1]) {
          break;
        }
      }
      if(nowfloor != i) {
        nowfloor = i;

        // 设置下标为i的项有current属性
        for(var j = 0; j < lis.length; j++){
          if (j == i) {
            lis[j].className = 'current'
          }else{
            lis[j].className = ''
          }
        }
      }
    }



  </script>
</body>
</html>